<template>
	<u-popup ref="popup" type="dialog" :mask-click="false">
		<view class="privacy-popup">
			<view class="title">隐私政策</view>
			<view class="content">
				感谢您使用我们的产品和服务。我们非常重视您的个人信息和隐私保护。
			</view>
			<view class="content">
				在使用我们的产品和服务前，请您仔细阅读
				<text class="link" @click="navigateToProtocol('1')">《用户协议》</text>
				和
				<text class="link" @click="navigateToProtocol('2')">《隐私政策》</text>
				，了解我们如何收集、使用和保护您的个人信息。
			</view>
			<view class="content">
				我们承诺严格按照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
			</view>
			
			<!-- 勾选框区域 -->
			<view class="checkbox-area">
				<u-checkbox 
					v-model="isAgreed" 
					shape="circle" 
					active-color="#007AFF"
					@change="onCheckboxChange"
				>
					<text class="checkbox-text">我已阅读并同意上述协议</text>
				</u-checkbox>
			</view>
			
			<view class="buttons">
				<button @click="onDisagree" class="disagree-btn">不同意</button>
				<button @click="onAccept" class="agree-btn" :disabled="!isAgreed">同意并继续</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	data() {
		return {
			isAgreed: false
		}
	},
	methods: {
		navigateToProtocol(id) {
			if (!id) {
				console.error("协议ID不能为空");
				return;
			}
			this.$refs.popup.close();
			uni.navigateTo({
				url: `/pages/public/richtext?id=${id}`
			});
		},
		onCheckboxChange(value) {
			this.isAgreed = value;
		},
		onAccept() {
			if (!this.isAgreed) {
				uni.showToast({
					title: '请先勾选同意协议',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			uni.setStorageSync('privacyAgreed', 'true');
			console.log("用户同意隐私协议");
			this.$refs.popup.close();
			this.$emit('agreed', true);
		},
		onDisagree() {
			uni.setStorageSync('privacyAgreed', 'false');
			console.log("用户拒绝隐私协议");
			this.$refs.popup.close();
			this.$emit('agreed', false);
			
			// 显示退出提示
			uni.showModal({
				title: '提示',
				content: '您需要同意隐私政策才能使用本应用。如果您不同意，将无法使用我们的产品和服务。',
				confirmText: '退出应用',
				cancelText: '重新查看',
				success: (res) => {
					if (res.confirm) {
						// #ifdef APP-PLUS
						plus.runtime.quit();
						// #endif
						// #ifdef H5
						window.close();
						// #endif
					} else {
						// 重新显示隐私协议
						setTimeout(() => {
							this.show();
						}, 300);
					}
				}
			});
		},
		show() {
			this.isAgreed = false; // 重置勾选状态
			this.$refs.popup.open();
		},
	}
};
</script>

<style scoped lang="scss">
.privacy-popup {
	padding: 30px 20px;
	background: #fff;
	border-radius: 15px;
	width: 85%;
	margin: 25vh auto 0;
	max-width: 400px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.title {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 20px;
	text-align: center;
	color: #333;
}

.content {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 15px;
	color: #666;
	text-align: justify;
}

.link {
	color: #007AFF;
	text-decoration: underline;
}

.checkbox-area {
	margin: 25px 0;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.checkbox-text {
	font-size: 15px;
	color: #333;
	margin-left: 8px;
	font-weight: 500;
}

.buttons {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-top: 20px;
}

.disagree-btn {
	flex: 1;
	height: 48px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	color: #666;
	font-size: 16px;
	font-weight: 500;
	
	&:active {
		background: #f5f5f5;
	}
}

.agree-btn {
	flex: 1;
	height: 48px;
	border: none;
	border-radius: 8px;
	background: #007AFF;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	
	&:disabled {
		background: #ccc;
		color: #999;
	}
	
	&:not(:disabled):active {
		background: #0056b3;
	}
}

::v-deep .u-drawer-left{
	background: transparent!important;
}

.privacy-popup {
	position: relative;
	z-index: 10000; /* 确保高于其他元素 */
}

/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
	.privacy-popup {
		background: #333 !important;
		color: #fff;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	}
	
	.title {
		color: #fff;
	}
	
	.content {
		color: #ccc;
	}
	
	.checkbox-text {
		color: #fff;
	}
	
	.checkbox-area {
		background: #444;
		border-color: #555;
	}
	
	.disagree-btn {
		background: #444;
		color: #ccc;
		border-color: #555;
		
		&:active {
			background: #555;
		}
	}
}
</style>